<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模板语法</title>
		<script type="text/javascript" src="../js/vue.min.js"></script>
	</head>
	<body>
		<!-- Vue模板语法有2大类:
		1.插值语法:功能:用于解析标签体内容。写法:{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
		2.指令语法:
			功能:用于解析标签《包括: 标签属性、标签体内容、绑定事件.....)
			举例:v-bind:href="xxx”或 简写为 :href="xxx”，xxx同样要写js表达式
				且可以直接读取到data中的所有属性。
			备注: Vue中有很多的指令，且形式都是: v-????，此处我们只是拿v-bind举个例子。 -->
		<div id="box">
			<h1>插值语法</h1>
			<h3>你好，{{school.name}}</h3>
			<hr />
			<h1>指令语法</h1>
			<!-- v-bind:绑定任何标签里任何一个属性值 -->
			<!-- toUpperCase()转为大写 -->
			<a v-bind:href="school.url.toUpperCase()" v-bind:x="hello">去硅谷</a>
		</div>

	</body>
	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				name: "模板...",
				hello: "xxx",
				school: {
					name: '尚硅谷',
					url: "http://www.atguigu.com/"
				}
			}
		})
	</script>
</html>